 <template>
 	<view>
 		<view class="pageStyle">

      <u-icon size="70" name="search" style="margin-bottom: 30rpx" @click="gotoPage('/pages/benefit/search')"></u-icon>

 			<!-- 导航栏 -->
 			<view class="barNav flex-center-space-around">
 				<view v-for="(item,index) in barList" :key="index" @click="barCurrent = index">
 					<text class="barText" :class="{barClass:barCurrent === index}">{{item.name}}</text>
 				</view>
 			</view>
 			<!-- 推荐 -->
 			<template v-if="barCurrent === 0">
 				<Recommend-Vue ref="Recommend"> </Recommend-Vue>
 			</template>
 			<!-- 新剧 -->
 			<template v-if="barCurrent === 1">
 				<NewDrama-Vue ref="NewDrama"> </NewDrama-Vue>
 			</template>
 			<!-- 排行榜 -->
 			<template v-if="barCurrent === 2">
 				<TheCharts-Vue ref="TheCharts"> </TheCharts-Vue>
 			</template>
 			<!-- 经典好剧 -->
 			<template v-if="barCurrent === 3">
 				<Goodrama-Vue ref="Goodrama"> </Goodrama-Vue>
 			</template>
 		</view>
 		<!-- 继续播放 -->
 		<view class="footerbox" v-if="history && show">
 			<view class="footerImg">
 				<image :src="history.tvImage" mode=""></image>
 				<view class="footerTitle">
 					<view class="" style="color: #ffffff;font-size: 28rpx">{{ history.tvName }}</view>
 					<view class="" style="color: #ffffff;font-size: 24rpx">上次观看至第{{history.series}}集</view>
 				</view>
 			</view>
<!--      <u&#45;&#45;image :showLoading="true" class="bg" :src="history.tvImage" width="100%" height="100%"></u&#45;&#45;image>-->
      <view class="bg" :style="{background:'url(' + history.tvImage + ') no-repeat',backgroundSize: 'cover',backgroundPosition: 'center'}"></view>
 			<view class="footerRight footerTitle">
 				<uni-icons type="closeempty" size="20" color="#FFFFFF" @click="close"></uni-icons>
 				<view class="footerBt" @click="gotoPage('/pages/player/player?tvId='+ history.tvId)">继续观看</view>
 			</view>
 		</view>
 	</view>
 </template>

 <script>
 	import RecommendVue from './components/recommend.vue';
 	import NewDramaVue from './components/NewDrama.vue';
 	import TheChartsVue from './components/TheCharts.vue';
 	import GoodramaVue from './components/Goodrama.vue';
	import {Api} from "../../service/api";
  import {gotoPage} from "../../utils/common";

 	export default {
 		components: {
 			RecommendVue,
 			NewDramaVue,
 			TheChartsVue,
 			GoodramaVue
 		},
 		data() {
 			return {
 				barList: [ // 头部列表
 					{
 						name: "推荐"
 					},
 					{
 						name: '新剧'
 					},
 					{
 						name: '排行榜'
 					},
 					{
 						name: '经典好剧'
 					},
 				],
 				barCurrent: 0, // 头部当前选
        history: null, // 观看记录
        show: false,
        tvId: null, // 如果是投流或者路径参数有 就不请求其他数据 直接跳转播放页
 			};
 		},
		onShow() {
			// if(!this.tvId) {
      setTimeout(()=>{
        this.gethistory()
      },600)
        // this.$refs.Recommend.getData()
      // }
		},
		onReachBottom() {
			if(this.barCurrent === 0){
				this.$refs.Recommend.getList()
			}
			if(this.barCurrent === 1){
				this.$refs.NewDrama.getList()
			}
			if(this.barCurrent === 2){
				// this.$refs.TheCharts.getList()
			}
			if(this.barCurrent === 3){
				// this.$refs.Goodrama.getList()
			}
		},
    onLoad(op){
      if(op.tvId){
        this.tvId = op.tvId
        PlayerManager.navigateToPlayer({
          srcAppid: op.srcAppid,
          dramaId: op.dramaId,
          tvId: this.tvId,
        });
      }
    },
 		methods: {
      gotoPage,
			gethistory(){
			 Api.getHistoryList({
         pageNo: 1,
         pageSize: 1,
       }).then(res=>{
         if(res.data.list.length > 0){
           this.history = res.data.list[0]
           this.show = this
         }
			 })
			},
			close(){
				this.show = false
			},
 		}
 	}
 </script>

 <style lang="scss" scoped>
 	.pageStyle {
 		padding: 100rpx 28rpx 0;
 		background-color: #FFFFFF;
 		//height: 100vh;
 		// overflow: scroll;
 	}

 	.barNav {
 		display: flex;
 		justify-content: space-between;
 		margin-bottom: 30rpx;

 		.barText {
 			font-size: 32rpx;
 			color: #686767;
 			font-weight: 700;
 		}

 		.barClass {
 			color: #171717;

 			font-size: 40rpx;
 		}
 	}

 	.footerbox {
    border-top-left-radius: 24rpx;
    border-top-right-radius: 24rpx;
 		//background-color: #E81F4B;
 		width: calc(100% - 40rpx);
 		height: calc(144rpx - 40rpx);
 		position: fixed;
 		bottom: 0;
 		z-index: 2;
 		padding: 20rpx;
 		display: flex;
 		justify-content: space-between;
 		align-items: center;
    overflow: hidden;

    .bg{
      filter: blur(28rpx);
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
    }

 		.footerImg {
 			display: flex;
      z-index: 99;

 			image {
 				width: 84rpx;
 				height: 108rpx;
 				margin-right: 20rpx;
 			}
 		}

 		.footerTitle {
 			display: flex;
 			flex-direction: column;
 			justify-content: space-between;
 		}

 		.footerRight {
 			align-items: flex-end;
 			height: 108rpx;
      z-index: 99;

 			.footerBt {
 				width: 134rpx;
 				height: 52rpx;
 				border-radius: 20rpx;
 				background-color: #FFFFFF;
 				line-height: 52rpx;
 				color: #303030;
 				font-size: 24rpx;
 				padding: 0 19rpx;
 				text-align: center;
 			}
 		}
 	}
 </style>
